<template>
  <div class="pwd-wrap">
    <div class="pwd-box">
      <div class="pwd-content">
        <div class="icon1"><img src="./icon.png" class="icon" onclick="return false"/></div>
        <div class="con-box"><input :type="pwdType1" class="pwd" placeholder="请输入旧密码" maxlength="16"
                                    v-model="pwd1" @blur="inputBlur"/></div>
        <div class="icon2" @click="changeType1"><img :src=pwdIcon1 class="eye" onclick="return false"/></div>
      </div>
      <div class="pwd-content">
        <div class="icon1"><img src="./icon.png" class="icon" onclick="return false"/></div>
        <div class="con-box"><input :type="pwdType2" class="pwd" placeholder="请输入新密码" maxlength="16"
                                    v-model="pwd2" @blur="inputBlur"/></div>
        <div class="icon2" @click="changeType2"><img :src=pwdIcon2 class="eye" onclick="return false"/></div>
      </div>
      <div class="pwd-content">
        <div class="icon1"><img src="./icon.png" class="icon" onclick="return false"/></div>
        <div class="con-box"><input :type="pwdType3" class="pwd" placeholder="请再次输入新密码" maxlength="16"
                                    v-model="pwd3" @blur="inputBlur"/></div>
        <div class="icon2" @click="changeType3"><img :src=pwdIcon3 class="eye" onclick="return false"/></div>
      </div>
    </div>
    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn" @click="modifyPwd">确定</button>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  import {baseUrl, salt} from "../../common/js/env";

  export default {
    data() {
      return {
        pwd1: "",
        pwdType1: "password",
        pwdIcon1: require("./eye2.png"),
        pwd2: "",
        pwdType2: "password",
        pwdIcon2: require("./eye2.png"),
        pwd3: "",
        pwdType3: "password",
        pwdIcon3: require("./eye2.png"),
        userSign: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));

      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      checkOldPwd() {
        if (this.pwd1 == "" || this.pwd1 == undefined) {
          this.$vux.toast.text("旧密码不能为空", "middle");
          return;
        }
        return true;
      },
      checkNewPwd(pwd) {//校验密码
        if (pwd == "") {
          this.$vux.toast.text("新密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("新密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("新密码不能包含中文", "middle");
          return;
        } else if (pwd.length < 6 || pwd.length > 16) {
          this.$vux.toast.text("新密码长度为6-16位", "middle");
          return;
        }
        return true;
      },
      checkConfirmPwd(newPwd, pwd) {
        if (newPwd == "") {
          this.$vux.toast.text("确认密码不能为空", "middle");
          return;
        } else if (newPwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("确认密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(newPwd)) {
          this.$vux.toast.text("确认密码不能包含中文", "middle");
          return;
        } else if (newPwd.length < 6 || newPwd.length > 16) {
          this.$vux.toast.text("确认密码长度为6-16位", "middle");
          return;
        } else if (newPwd != pwd) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      changeType1() {
        this.pwdType1 = this.pwdType1 === 'password' ? 'text' : 'password';
        this.pwdIcon1 = this.pwdIcon1 == require("./eye1.png") ? require("./eye2.png") : require("./eye1.png");
      },
      changeType2() {
        this.pwdType2 = this.pwdType2 === 'password' ? 'text' : 'password';
        this.pwdIcon2 = this.pwdIcon2 == require("./eye1.png") ? require("./eye2.png") : require("./eye1.png");
      },
      changeType3() {
        this.pwdType3 = this.pwdType3 === 'password' ? 'text' : 'password';
        this.pwdIcon3 = this.pwdIcon3 == require("./eye1.png") ? require("./eye2.png") : require("./eye1.png");
      },
      modifyPwd() {
        let oldPwd = this.pwd1;
        let newPwd = this.pwd2;
        let confirmPwd = this.pwd3;
        if (this.checkOldPwd() && this.checkNewPwd(newPwd) && this.checkConfirmPwd(confirmPwd, newPwd)) {
          //修改密码
          this.$vux.loading.show({
            text: '加载中',
          });
          this.axios.get(baseUrl + "/login/modify_psw?sgin=" + this.userSign + "&newPsw=" + md5(md5(newPwd) + salt) + "&password=" + md5(md5(oldPwd) + salt)).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("修改密码失败，请重试", "middle");
              } else {
                this.$router.push("/login");
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch((error) => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .pwd-wrap
    wh(100%, 100%)
    overflow: hidden
    .pwd-box
      margin: 0 auto
      margin-top: 0.547rem
      wh(92.53%, auto)
      .pwd-content
        display: flex
        align-items: center
        wh(100%, 1.133rem)
        margin-bottom: 0.547rem
        border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
        .icon1
          width: 0.787rem
          .icon
            wh(0.387rem, 0.467rem)
        .con-box
          width: 6.947rem
          .pwd
            wh(100%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(154, 154, 154, 1))
        .icon2
          wh(0.493rem, 0.333rem)
          margin-left: auto
          margin-right: 0.28rem
          .eye
            wh(100%, 100%)
    .btn-box
      fj(center, center)
      position: fixed
      bottom: 0.48rem
      wh(100%, 1.333rem)
      border-radius(0.107rem)
      .btn
        wh(92.53%, 1.333rem)
        background: rgba(60, 175, 255, 1)
        border-radius(0.107rem)
        size-color(0.48rem, rgba(255, 255, 255, 1))
</style>
